<template>
	<view class="mingxi">
		<app-title text='审核明细' @leftClick='backFun' color="#fff"></app-title>
		<scroll-view class="mingxi_box_scroll" :scroll-top="0" :scroll-y="true">
			<view class="mingxi_box_scroll_item" v-for="(item,index) in list" :key="index">
				<view class="mingxi_box_scroll_item_top">
					<image src="@/static/wallet/jinbi.png" mode="widthFix"></image>
					<view class="mingxi_box_scroll_item_top_center">
						<p>{{item.status === '5'?'充值成功':item.status === '10'?'充值失败':'充值待审核'}}</p>
						<span
							v-if="item.status === '5' || item.status === '0'">{{item.bankname +'   '+item.bankid}}</span>
						<span v-else>失败原因：{{item.remark}}</span>
					</view>
					<view class="mingxi_box_scroll_item_top_Amount"
						:style="item.status === '10'?'color:#57ad40;':'color:red;'">
						<span>{{item.status === '10'?'-':'+'}}</span>{{item.money}}
					</view>
				</view>
				<view class="mingxi_box_scroll_item_bottom">
					<view class="mingxi_box_scroll_item_bottom_item">
						申请时间:{{item.time}}
					</view>
					<view class="mingxi_box_scroll_item_bottom_item" v-if="item.status !== '0'">
						审核时间:{{item.shtime}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import appTitle from '@/components/appTitle.vue';
	import {
		api_index_recharge_list
	} from '@/api/wallet.js'
	export default {
		components: {
			appTitle
		},
		data() {
			return {
				openid: '',
				list: ''
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_recharge_listFun()
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			async api_index_recharge_listFun() {
				let up = {
					openid: this.openid
				}
				let data = await api_index_recharge_list(up);
				console.log(data);
				this.list = data.list;
			},
			lower(e) {
				// console.log(e);





			},
			upper(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.mingxi {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.mingxi_box_scroll {
			width: 100%;
			flex: 1;
			background-color: #F6F6F6;
			padding: 20rpx 0;
			box-sizing: border-box;
			overflow-y: auto;

			.mingxi_box_scroll_item {
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #ebebeb;
				display: flex;
				flex-direction: column;

				.mingxi_box_scroll_item_top {
					width: 100%;
					flex: 1;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					position: relative;

					image {
						width: 100rpx;
					}

					.mingxi_box_scroll_item_top_center {
						height: 100%;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						padding: 0 20rpx;

						span {
							font-size: 22rpx;
							color: #ccc;
						}

					}

					.mingxi_box_scroll_item_top_Amount {
						min-width: 200rpx;
						height: 60rpx;
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto 0;
						text-align: right;
						padding-right: 20rpx;
						font-size: 40rpx;
						line-height: 60rpx;

					}


				}

				.mingxi_box_scroll_item_bottom {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;

					.mingxi_box_scroll_item_bottom_item {
						font-size: 20rpx;
						color: #333;
					}

				}
			}
		}
	}
</style>